<template>
    <view class="gjl-components">
        <view class="sign-calendar">
            <view class="top-bar" :class="{ hidden: !monthOpen }">
                <view @click="turning('prev')" class="prev">
                    <mIcon type="arrRight" size="16" color="#333"></mIcon>
                </view>
                <view class="time">{{ y }}年-{{ m + 1 }}月</view>
                <view @click="turning('next')" class="next">
                    <mIcon type="arrRight" size="16" color="#333"></mIcon>
                </view>
            </view>
            <view class="week">
                <view class="week-day" v-for="(item, index) in weekDay" :key="index">{{ item }}</view>
            </view>
            <view :class="{ hide: !monthOpen }" class="content" :style="{ height: height }">
                <view :style="{ top: positionTop + 'upx' }" class="days">
                    <view class="item" v-for="(item, index) in dates" :key="index" :class="{nolm: !item.lm}">
                        <!-- choose: choose == `${item.year}-${item.month + 1}-${item.date}` -->
                        <view class="day" @click="selectOne(item, $event)" :class="{'after':isAfter(item.year, item.month + 1, item.date),'err':isErr(item.year, item.month + 1, item.date),'today':isToday(item.year, item.month, item.date),'sign':isSigned(item.year, item.month + 1, item.date)}">
                            <view class="date-num">{{ item.date }}</view>
                        </view>
                        <!-- <view class="test" v-if="userInfo.testStatus">
                            {{isAfter(item.year, item.month + 1, item.date)}}
                        </view> -->
                        <view class="sign" v-if="isSigned(item.year, item.month + 1, item.date)"><view class="dot"></view></view>
                        <view class="today-text" v-if="isToday(item.year, item.month, item.date) && !isSigned(item.year, item.month + 1, item.date)"><view class="dot"></view></view>
                        <view class="afterDay" v-if="isAfter(item.year, item.month + 1, item.date)"><view class="dot"></view></view>
                        <view class="isErr" v-if="isErr(item.year, item.month + 1, item.date)"><view class="dot"></view></view>
                    </view>
                </view>
            </view>
            <view class="tip-box">
                <view class="tip-li" v-for="(item,index) in tipArr" :key="index">
                    <view class="dot" :style="{backgroundColor: item.color}">
                        
                    </view>
                    <view class="text">
                        {{item.title}}
                    </view>
                </view>
            </view>
            <!-- <image src="/static/dark-calendar/ico-arrow-up.png" mode="scaleToFill" @click="trgWeek()" class="weektoggel"
                :class="{ down: !monthOpen }"></image> -->
        </view>
        <!-- <view class="btn-box">
            <view class="btn" @click="trgWeek()" :class="{ down: !monthOpen }">
                <mIcon type="arrDown" size="16" color="#fff" class="arr"></mIcon>
            </view>
        </view> -->
    </view>
</template>

<script>
    export default {
        name: 'dark-calendar',
        props: {
            // tipArr
            tipArr: {
                type: Array,
                default: function(){
                    return [{
                        title: '打卡成功',
                        color: '#2BA8FC'
                    },
                    {
                        title: '当前时间',
                        color: '#FAA451'
                    },
                    {
                        title: '缺卡',
                        color: '#CFCFCF'
                    }]
                }
            },
            // 第一列星期几
            weekstart: {
                type: Number,
                default: 7
            },
            // 已经签到的日期
            signeddates: {
                type: Array,
                default: function() {
                    return ['2020-3-2', '2020-3-19', '2020-3-24']
                }
            },
            // 是否展开
            open: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                text: {
                    year: '年',
                    month: '月',
                    week: ['一', '二', '三', '四', '五', '六', '日'],
                    today: '今'
                },
                y: new Date().getFullYear(), // 年
                m: new Date().getMonth(), // 月
                dates: [], // 当前月日期集合
                positionTop: 0,
                monthOpen: true,
                choose: ''
            }
        },
        created() {
            this.dates = this.monthDay(this.y, this.m) || !this.open && this.trgWeek();
            // this.trgWeek();
        },
        mounted() {
            let date = new Date()
            let y = date.getFullYear()
            let m = date.getMonth()
            let d = date.getDate()
            // this.choose = `${y}-${m + 1}-${d}`

            // console.log(this.choose)
        },
        computed: {
            // 用户信息
            userInfo() {
                return this.$store.state.userInfo
            },
            // 顶部星期栏目
            weekDay() {
                return this.text.week.slice(this.weekstart - 1).concat(this.text.week.slice(0, this.weekstart - 1))
            },
            height() {
                let arr = [];
                for (let i = 0; i < this.dates.length; i++) {
                    if (this.dates[i].lm) {
                        arr = [];
                    } else {
                        arr.push(this.dates[i])
                    }
                }
                if (arr.length >= 7) {
                    return ((this.dates.length / 7) - 1) * 100 + 'upx'
                } else {
                    return (this.dates.length / 7) * 100 + 'upx'
                }

            }
        },
        methods: {
            // 获取当前月份天数
            monthDay(y, m) {
                let firstDayOfMonth = new Date(y, m, 1).getDay() // 当月第一天星期几
                let lastDateOfMonth = new Date(y, m + 1, 0).getDate() // 当月最后一天
                let lastDayOfLastMonth = new Date(y, m, 0).getDate() // 上一月的最后一天
                let dates = [] // 所有渲染日历
                let weekstart = this.weekstart == 7 ? 0 : this.weekstart // 方便进行日期计算，默认星期从0开始
                let startDay = (() => {
                    // 周初有几天是上个月的
                    if (firstDayOfMonth == weekstart) {
                        return 0
                    } else if (firstDayOfMonth > weekstart) {
                        return firstDayOfMonth - weekstart
                    } else {
                        return 7 - weekstart + firstDayOfMonth
                    }
                })()
                let endDay = 7 - ((startDay + lastDateOfMonth) % 7) // 结束还有几天是下个月的
                for (let i = 1; i <= startDay; i++) {
                    dates.push({
                        date: lastDayOfLastMonth - startDay + i,
                        day: weekstart + i - 1 || 7,
                        month: m - 1 >= 0 ? m - 1 : 12,
                        year: m - 1 >= 0 ? y : y - 1
                    })
                }
                for (let j = 1; j <= lastDateOfMonth; j++) {
                    dates.push({
                        date: j,
                        day: (j % 7) + firstDayOfMonth - 1 || 7,
                        month: m,
                        year: y,
                        lm: true
                    })
                }
                for (let k = 1; k <= endDay; k++) {
                    dates.push({
                        date: k,
                        day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
                        month: m + 1 <= 11 ? m + 1 : 0,
                        year: m + 1 <= 11 ? y : y + 1
                    })
                }
                this.$emit('changeMouth', dates)
                return dates
            },
            // 缺卡处理
            isErr(y, m, d) {
                // 日历时间
                let dy = `${y}/${m}/${d}`;
                let date2 = new Date(dy) / 1000;
                // 当前时间
                let date = new Date().getTime() / 1000;
                let dateFillter = this.$utils.format(date)
                let dy2 = `${dateFillter.y}/${dateFillter.m1}/${dateFillter.d1}`
                // 用户时间
                // let dateFillter3 = this.userInfo.memberAddTime ? this.$utils.format(this.userInfo.memberAddTime) :
                //     this.$utils.format(date)
                // let dy3 = `${dateFillter3.y}-${dateFillter3.m1}-${dateFillter3.d1}`
                // let date3 = new Date(dy3).getTime() / 1000
                // 功能上线时间
                let date4 = new Date('2020/3/31').getTime() / 1000
                if (dy == dy2) {
                    return false
                }
                // 当前时间
                if (date4 > date2) {
                    return false
                }
                if (date > date2) {
                    if (this.isSigned(y, m, d)) {
                        // console.log(date4, date3, date2)
                        return false
                    } else {
                        return true
                    }
                }
                return false
            },
            // 已经签到处理
            isSigned(y, m, d) {
                let flag = false
                for (let i = 0; i < this.signeddates.length; i++) {
                    let dy = `${y}-${m}-${d}`
                    // console.log(dy)
                    if (this.signeddates[i] == dy) {
                        flag = true
                        break
                    }
                }

                return flag
            },
            // 待签到处理
            isAfter(y, m, d) {
                // 日历时间
                let dy = `${y}/${m}/${d}`;
                let date2 = new Date(dy) / 1000;
                // 当前时间
                let date = new Date().getTime() / 1000;
                let dateFillter = this.$utils.format(date)
                let dy2 = `${dateFillter.y}-${dateFillter.m1}-${dateFillter.d1}`
                // if (this.userInfo.testStatus) {
                //     uni.showModal({
                //         title: '提示',
                //         content: `dy2${dy2}dy${dy}`,
                //         showCancel: false,
                //         confirmColor: '#0DE5CE'
                //     })
                // }
                if (dy == dy2) {
                    // if (this.userInfo.testStatus) {
                    //     uni.showModal({
                    //         title: '提示',
                    //         content: `dy2${dy2}dy${dy}`,
                    //         showCancel: false,
                    //         confirmColor: '#0DE5CE'
                    //     })
                    // }
                    if (this.isSigned(y, m, d)) {
                        return false
                    } else {
                        return true
                    }
                }
                // if (date < date2) {
                //     return true
                // }
                return false
            },
            isToday(y, m, d) {
                let date = new Date()
                return y == date.getFullYear() && m == date.getMonth() && d == date.getDate()
            },
            // 切换成周模式
            trgWeek() {
                this.monthOpen = !this.monthOpen
                if (this.monthOpen) {
                    this.positionTop = 0
                } else {
                    let index = -1
                    this.dates.forEach((i, x) => {
                        this.isToday(i.year, i.month, i.date) && (index = x)
                    })
                    this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 100
                }
            },
            // 点击回调
            selectOne(i, event) {
                let date = `${i.year}-${i.month + 1}-${i.date}`
                let selectD = new Date(date)
                if (selectD.getMonth() != this.m) {
                    console.log('不在可选范围内')
                    return false
                }
                this.choose = date
                this.$emit('on-click', date)
                console.log(i, event, selectD.getMonth())
            },
            // 上个月，下个月
            turning(_action) {
                if (_action === 'next') {
                    if (this.m + 1 == 12) {
                        this.m = 0
                        this.y = this.y + 1
                    } else {
                        this.m = this.m + 1
                    }
                } else {
                    if (this.m + 1 == 1) {
                        this.m = 11
                        this.y = this.y - 1
                    } else {
                        this.m = this.m - 1
                    }
                }
                this.dates = this.monthDay(this.y, this.m)
                // this.$emit('changeMouth',this.dates)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .gjl-components {
        .btn-box {
            display: flex;
            align-items: center;
            justify-content: center;

            .btn {
                display: flex;
                align-items: flex-start;
                justify-content: center;
                width: 100rpx;
                height: 0;
                border-top: 50rpx solid #03CE8B;
                border-right: 37rpx solid transparent;
                border-left: 37rpx solid transparent;

                .arr {
                    transform: rotateZ(180deg);
                    transition: all 0.4s ease;
                    margin-top: -40rpx;
                }
            }

            .btn.down {
                .arr {
                    transform: rotateZ(0);
                }
            }
        }
    }

    .sign-calendar {
        // padding: 0 32rpx 30rpx;
        color: #fff;
        font-size: 28upx;
        text-align: center;
        // background-color: #3d9bf6;
        // background: linear-gradient(180deg, rgba(48, 255, 187, 1) 0%, rgba(3, 206, 139, 1) 100%);
        // box-shadow: 0px 2px 8px rgba(3, 206, 139, 0.2);
        
        .tip-box{
            height: 120rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .tip-li{
                display: flex;
                align-items: center;
                .dot{
                    width:10rpx;
                    height:10rpx;
                    background:rgba(3,206,139,1);
                    border-radius:50%;
                }
                .text{
                    margin-left: 18rpx;
                    font-size:24rpx;
                    font-weight:400;
                    color:rgba(51,51,51,1);
                }
            }
        }
        .top-bar.hidden {
            display: none;
        }

        .top-bar {
            // margin-bottom: 30rpx;
            // margin-top: 13rpx;
            padding: 40rpx 59rpx 31rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom:1px solid rgba(229,229,229,1);
            .prev {
                transform: rotateZ(180deg);
            }

            .next {}

            .time {
                font-size:32rpx;
                font-weight:bold;
                color:rgba(51,51,51,1);
            }

            // font-size: 28upx;
            // height: 80upx;
            // line-height: 80upx;
            // border-bottom: 1upx solid rgba(255, 255, 255, 0.3);

            // display: flex;

            // >view {
            //     flex: 1;
            // }
        }

        .week {
            display: flex;
            align-items: center;
            height: 124upx;
            line-height: 124upx;
            font-size:28rpx;
            font-weight:bold;
            color:rgba(51,51,51,1);
            // border-bottom: 1upx solid rgba(255, 255, 255, 0.2);

            view {
                flex: 1;
            }
        }

        .content {
            position: relative;
            overflow: hidden;
            transition: height 0.4s ease;
            border-bottom:1px solid rgba(229,229,229,1);
            .days {
                transition: top 0.3s;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                position: relative;

                .nolm.item {
                    visibility: hidden;
                    height: 0;
                }

                .item {
                    position: relative;
                    display: block;
                    height: 100upx;
                    // line-height: 100upx;
                    width: calc(100% / 7);
                    .dot{
                        width:10rpx;
                        height:10rpx;
                        background:rgba(43,168,252,1);
                        border-radius:50%;
                        margin: 0 auto;
                    }
                    // .day.after::after {
                    //     z-index: 1;
                    //     content: "";
                    //     display: block;
                    //     position: absolute;
                    //     top: 50%;
                    //     left: 50%;
                    //     transform: translate(-50%, -50%);
                    //     height: 58rpx;
                    //     width: 58rpx;
                    //     background: rgba(255, 255, 255, 0.6);
                    //     border-radius: 50%;
                    // }

                    // .day.err::before {
                    //     z-index: 1;
                    //     content: "";
                    //     display: block;
                    //     position: absolute;
                    //     top: 50%;
                    //     left: 50%;
                    //     transform: translate(-50%, -50%);
                    //     height: 50rpx;
                    //     width: 50rpx;
                    //     background: rgba(255, 45, 50, 1);
                    //     border-radius: 50%;
                    // }
                    .today-text{
                        .dot{
                            background:#FAA451;
                        }
                    }
                    .afterDay {
                        .dot{
                            background:rgba(250,164,81,1);
                        }
                    }

                    .isErr {
                        .dot{
                            background:rgba(207,207,207,1);
                        }
                    }

                    .day {
                        margin-top: 10rpx;
                        position: relative;
                        font-style: normal;
                        display: inline-block;
                        vertical-align: middle;
                        width: 58upx;
                        height: 58upx;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 50%;
                        font-size:28rpx;
                        font-weight:400;
                        color:rgba(153,153,153,1);
                        // overflow: hidden;
                        border-radius: 50%;

                        .date-num {
                            width: 58upx;
                            height: 58upx;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            line-height: 58rpx;
                            border-radius: 16rpx;
                            // background:rgba(43,168,252,0.2);
                            // border:1px solid rgba(43,168,252,1);
                            // color:rgba(43,168,252,1);
                            color:rgba(153,153,153,1);
                            transform: translate(-50%, -50%);
                            z-index: 2;
                        }
                        &.sign{
                            .date-num{
                                
                            }
                        }
                        &.after{
                            .date-num{
                                
                            }
                        }
                        &.err {
                            .date-num {
                                
                            }
                        }

                        &.choose {
                            
                        }

                        // &.nolm {
                        //   color: #fff;
                        //   opacity: 0.3;
                        // }
                    }

                    .sign {
                        margin-top: 5rpx;
                        // line-height: 0;
                        font-size: 24rpx;
                        font-weight: 400;
                        color:rgba(43,168,252,1);
                        // font-style: normal;
                        // width: 20upx;
                        // height: 20upx;
                        // background: #fff;
                        // border-radius: 10upx;
                        // position: absolute;
                        // left: 50%;
                        // margin-left: -10upx;
                        // bottom: 0;
                        // pointer-events: none;
                    }

                    .today-text {
                        // position: absolute;
                        // font-size: 20upx;
                        // font-weight: normal;
                        // width: 20upx;
                        // height: 20upx;
                        // line-height: 20upx;
                        // right: 0;
                        // top: 10upx;
                        // color: #fff;
                    }
                }
            }
        }

        .hide {
            height: 100upx !important;
        }

        .weektoggel {
            width: 80upx;
            height: 40upx;
            margin: 10upx auto 0;

            &.down {
                transform: rotate(180deg);
            }
        }
    }
</style>
